<template>
    <div class='balanceChange'>
        <div class="container">
            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" class="search-con">
                <el-form-item label="余额变动类型" prop="key_change_type">
                    <el-select v-model="queryParams.key_change_type" placeholder="请选择" clearable size="small">
                        <el-option v-for="dict in changeTypeList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="余额类型" prop="key_balance_type">
                    <el-select v-model="queryParams.key_balance_type" placeholder="请选择" clearable size="small">
                        <el-option v-for="dict in balanceTypeList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="余额变动方式" prop="key_pay_type">
                    <el-select v-model="queryParams.key_pay_type" placeholder="请选择" clearable size="small">
                        <el-option v-for="dict in payTypeList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="订单号" prop="key_order_no">
                    <el-input v-model="queryParams.key_order_no" placeholder="请输入" clearable size="small" />
                </el-form-item>
                <el-form-item label="用户名" prop="key_name">
                    <el-input v-model="queryParams.key_name" placeholder="请输入" clearable size="small" />
                </el-form-item>
                <el-form-item label="加盟商名称" prop="key_busin_name">
                    <el-input v-model="queryParams.key_busin_name" placeholder="请输入" clearable size="small" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>

            <el-table border v-loading="loading" :data="tableList" ref="tableList" v-tableHeight :height="tableList.length > 0 ? '900px' : '120px'">
                <el-table-column label="用户信息" align="center">
                    <template slot-scope="scope">
                        <div class="flex">
                            <div class="pic">
                                <el-image style="width: 40px; height: 40px;border:1px solid #eee;border-radius: 5px;" :src="scope.row.user.avatar"
                                    :preview-src-list="[scope.row.user.avatar]" />
                            </div>
                            <div class="txt">
                                <div>用户名：{{ scope.row.user.name }}</div>
                                <div>用户昵称：{{ scope.row.user.nicename }}</div>
                                <div>用户手机号：<span class="link-type">{{ scope.row.user.mobile }}</span></div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="余额信息" align="center">
                    <template slot-scope="scope">
                        <div class="flex">
                            <div class="txt">
                                <div>加盟商名称：{{ scope.row.busin.busin_name }}</div>
                                <div>关联订单号：{{ scope.row.tie_order_no }}</div>
                                <div v-if="scope.row.balance_type==101">到 账 金 额：{{ scope.row.reality_account_amount }}(理论到账金额：{{
                                    scope.row.theory_account_amount }})</div>
                                <div v-if="scope.row.balance_type==201">支 出 金 额：{{ scope.row.reality_account_amount }}(理论支出金额：{{
                                    scope.row.theory_account_amount }})</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="余额信息" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.balance_type==101" type="warning" effect="plain">
                            收益
                        </el-tag>
                        <el-tag v-if="scope.row.balance_type==201" type="danger" effect="plain">
                            支出
                        </el-tag>
                        <el-tag v-if="scope.row.balance_type==101" type="" effect="plain">
                            分享收益
                        </el-tag>
                        <el-tag v-if="scope.row.balance_type==201" type="" effect="plain">
                            购买商品
                        </el-tag>

                        <el-tag v-if="scope.row.pay_type==1" type="warning" effect="plain">
                            微信
                        </el-tag>
                        <el-tag v-if="scope.row.pay_type==2" type="" effect="plain">
                            支付宝
                        </el-tag>
                        <el-tag v-if="scope.row.pay_type==3" type="success" effect="plain">
                            金币
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="pageCount > 0" :pageCount="pageCount" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />
        </div>
    </div>
</template>
<script>
import { getBalanceLists } from "@/api/senior/index.js"
import { changeTypeList, balanceTypeList } from "@/api/dictionary.js"
export default {
    name: 'balanceChange',
    components: {

    },
    data() {
        return {
            showSearch: true,
            loading: false,
            pageCount: 0,
            total: 0,
            queryParams: {
                page: 1,
                limit: 20,
                key_change_type: null,
                key_balance_type: null,
                key_pay_type: null,
                key_order_no: null,
                key_name: null,
                key_busin_name: null,
            },
            tableList: [],
            changeTypeList: changeTypeList,
            balanceTypeList: balanceTypeList,
            payTypeList: [
                { dictValue: 1, dictLabel: "微信" },
                { dictValue: 2, dictLabel: "支付宝" },
                { dictValue: 3, dictLabel: "金币" }
            ],
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.loading = true;
            getBalanceLists(this.queryParams).then(res => {
                console.log(res, "ressss6")
                this.tableList = res.data.lists;
                this.pageCount = res.data.pageCount;
                this.loading = false;
            });
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
    },
}

</script>
<style scoped lang='scss'>
.flex {
    display: flex;
    align-items: center;
    .txt {
        padding-left: 20px;
        div {
            text-align: left;
        }
    }
}
/deep/.el-tag {
    margin-right: 10px !important;
}
</style>